<template>
<div>

  <!--页面头-->
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <a class="navbar-brand" href="#">学生选课管理</a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li><router-link :to="{path:'/Course'}" replace>课程管理</router-link></li>
          <li><router-link :to="{path:'/Login'}" replace>学生管理</router-link></li>
          <li><router-link :to="{path:'/coursemage'}" replace>选课管理</router-link></li>
          <li><router-link :to="{path:'/Stucou'}" replace>选课明细表</router-link></li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>
  <!--页面表头结尾-->

  <!--学生信息表格-->
  <div id="course">
    <!--学号/姓名查询表单-->
    <form class="form-inline">
      <div class="form-group">
        <input type="text" v-model="CidAndName" class="form-control"  placeholder="输入编号/名称">
      </div>
      <button type="button" @click="queryParams" class="btn btn-default">
        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
      </button>
    </form>
    <br/>
    <table class="table table-hover">
      <thead bgcolor="#dcdcdc">
      <th>学号</th>
      <th>课程编号</th>
      <th>课程名称</th>
      <th>学分</th>
      <th>学时</th>
      <th>备注</th>
      <th></th>
      </thead>
      <tr v-for="cm in coursemanage">
        <td v-text="cm.sid"></td>
        <td v-text="cm.cid"></td>
        <td v-text="cm.cname"></td>
        <td v-text="cm.cnum"></td>
        <td v-text="cm.ctime"></td>
        <td v-text="cm.cremark"></td>
        <td>&nbsp;</td>

      </tr>
    </table>

    <!--页面低端-->
    <!-- 底部 -->
    <div class="navbar navbar-default navbar-fixed-bottom" style="height: 50px;background-color: gainsboro;" >
      <div class="container" align="center" style="margin-top: -13px" >
        <ul class="pagination" >
          <li>
            <a href="#" @click="TopPg" aria-label="Previous" >
              <span aria-hidden="true">&laquo;</span>
            </a>
          </li>
          <li>
            <a href="#" @click="pageBack" aria-label="Previous" >
              <span aria-hidden="true">&#139;</span>
            </a>
          </li>
          <li class="" name="clickPg" v-for="n in countNum">
            <a href="#" @click="numberPg(n)" v-text="n">1<span class="sr-only">(current)</span></a>
          </li>
          <li>
            <a href="#" @click="pageNext" aria-label="Next">
              <span aria-hidden="true">&#155;</span>
            </a>
          </li>
          <li>
            <a href="#" @click="lastPg" aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>

</div>
</template>

<script>
export default {
  name: "StuCou",
  data(){
    return{
      //存储选课明细信息
      coursemanage:[],
      //设置每页数数量
      Count:4,
      //设置开始页数
      Pages:0,
      //存储总页数
      countNum:0,
      //存储数据总条数,
      pageSum:0,
      //条件查询
      CidAndName:""
    }
  },
  created() {
    this.getCoursemanageList();
    //加载页面调用查询总页面方法
    this.cuontPages();
  },

  methods: {
    //一键到达顶页
    TopPg(){
      //0表示为第一页
      this.Pages=0;
      this.getCoursemanageList();
    },
    //一键到达尾页
    lastPg(){
      //页数改变-- 总数据条数-每页数量=尾页索引
      //this.Pages=this.pageSum-this.Count;
      if(this.Pages<(this.pageSum-this.Count)){
        //页数改变-- 总数据条数-每页数量=尾页索引
        this.Pages=this.pageSum-this.Count;
        this.getCoursemanageList();
      }else{
        alert("已到达尾页!");
      }

    },
    //点击数字换页
    numberPg(n){
      //页数改变-- (n表示第几页*每页数量)-每页数量  （从0开始查询为第一页） 结果得到要查询的页数
      this.Pages=(n*this.Count)-this.Count;
      this.getCoursemanageList();
    },
    //上一页操作
    pageBack(){
      //this.Pages=this.Pages-this.Count;
      console.log(this.Pages);
      //页数改变  每点击一次  页数索引-每页数量  直到减到页数索引为0后停止 （0表示为第一页开始）
      if(this.Pages!=0){

        this.Pages=this.Pages-this.Count;
        this.getCoursemanageList()
      }else{
        alert("已到达顶页!");
      }

    },
    //下一页操作
    pageNext(){
      //页数改变  每点击一次  页数索引+每页数量
      //直到家到页数索引为数据总条数后停止（0表示为第一页开始）
      //因为从0索引开始加 所以总数据条数要-每页页数数量
      //判断如果Pages的页数超过数据数量的页数则停止下一页
      if(this.Pages<(this.pageSum-this.Count)){
        //每点击一次页数发生改变
        this.Pages=this.Pages+this.Count;
        //回调方法
        this.getCoursemanageList();
      }else{
        alert("已到达尾页!");
      }

    },
    //查询总页数
    cuontPages(){
      this.axios.get("http://localhost:8003/courmanagepage").then(response =>{
        let num = response.data[0].pgCount;
        this.pageSum = num;
        console.log(num);
        let count = this.Count;
        // 总数据条数/每页数量=总页数
        let countNum = num/count;
        //获取一共多少页
        //如果整除不为整数则+1 一页
        if(countNum>parseInt(countNum)){
          this.countNum=parseInt(countNum)+1;
        }else{
          this.countNum=countNum;
        }
      })
    },
    //带参查询
    queryParams() {
      this.getCoursemanageList();
      //this.Pages=0;
    },
    //查询信息
    getCoursemanageList() {
      this.axios.get('http://localhost:8003/coursemanage',{
        params:{
          "CidAndName":this.CidAndName,
          //页数
          "Pages":this.Pages,
          //每页数量
          "Count":this.Count
        }
      }).then(response => {
        console.log(response);
        this.coursemanage = response.data;
      });
    }
  }
}
</script>

<style scoped>

</style>
